<template>
  <div class="song-list-page">
    <ul>
      <li class="item" :class="currentIndex===index?'active':''" v-for="(item, index) in data" :key="item.id" @click="songCickAction(index)">
        <p class="index">{{ index + 1 }}</p>
        <div class="content">
          <h3 class="name">{{ item.name }}</h3>
          <p class="info" :class="currentIndex===index?'active':''" >
            <span>{{ item.ar }}</span>
            <span> - </span>
            <span>{{ item.al.name }}</span>
          </p>
        </div>
        <i class="iconfont" :class="currentIndex===index?'icon-zanting1':'icon-zanting2'"></i>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  // 接收外部的属性
  props: {
    data: Array
  },
  methods: {
    songCickAction (index) {
      // 将用户点击的歌曲列表下标和当前的歌曲列表传递给store
      this.$store.commit({
        type: 'player/selectSongByIndex', // commit的事件名称
        index: index, // 参数，点击的下标
        list: this.data// 参数，整个歌单列表
      })
    }
  },
  computed: {
    ...mapState({
      // 播放歌曲的索引
      currentIndex: state => state.player.currentIndex
    })
  }
}
</script>

<style scoped lang="less">
.song-list-page {
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  .item {
    border-bottom: 1px solid #eee;
    display: flex;
    padding: 10px 20px 10px 10px;
    align-items: center;
    .index {
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      margin: 0px;
    }
    .content {
      flex: 1;
      height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    .name {
      font-size: 16px;
      font-weight: normal;
      margin: 0px;
    }
    .info {
      font-size: 13px;
      color: #555;
      line-height: 22px;
      margin: 0px;
    }
  }
}
.active {
  color: #dc2c1f!important;
}
</style>
